<template>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
    preset="dialog"
    :on-after-leave="cancel"
    :title="isUpdate ? '修改' : '新建'"
  >
    <n-form
      :model="formParams"
      :rules="rules"
      ref="formRef"
      label-placement="left"
      :label-width="80"
      class="py-4"
    >
      <n-form-item label="用户编号" path="userCode">
        <n-input placeholder="请输入用户编号" v-model:value="formParams.userCode" />
      </n-form-item>
      <n-form-item label="用户名称" path="userName">
        <n-input placeholder="请输入用户名称" v-model:value="formParams.userName" />
      </n-form-item>
      <n-form-item label="真实名称" path="realName">
        <n-input placeholder="请输入真实名称" v-model:value="formParams.realName" />
      </n-form-item>
      <n-form-item label="手机号" path="mobileNumber">
        <n-input placeholder="请输入手机号" v-model:value="formParams.mobileNumber" />
      </n-form-item>
      <n-form-item label="邮箱地址" path="emailAddress">
        <n-input placeholder="请输入邮箱地址" v-model:value="formParams.emailAddress" />
      </n-form-item>
      <n-form-item label="是否启用" path="enabled">
        <n-switch v-model:value="formParams.enabled" />
      </n-form-item>
      <n-form-item label="角色" path="enabled">
        <n-select
          v-model:value="formParams.roleIds"
          value-field="roleId"
          label-field="roleName"
          multiple
          :options="roleOptions"
        />
      </n-form-item>
      <n-form-item label="密码" path="password" v-if="!isUpdate">
        <n-input placeholder="请输入密码" v-model:value="formParams.password" />
      </n-form-item>
    </n-form>

    <template #action>
      <n-space>
        <n-button @click="cancel">取消</n-button>
        <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
import { ref, defineExpose, defineProps, reactive, defineEmits } from 'vue';
import { add, update } from '@/api/system/user';

import { useMessage } from 'naive-ui';
import commonUtils from '@/utils/commonUtils';

const formRef: any = ref(null);
const showModal = ref(false);
const formBtnLoading = ref(false);
const message = useMessage();
let _clickData = null;
let isUpdate = ref(false);

const defaultValueRef = () => ({
  userId: null,
  userCode: '',
  userName: '',
  realName: null,
  emailAddress: '',
  mobileNumber: '',
  password: null,
  enabled: true,
  roleIds: [],
});

const props = defineProps(['roleOptions']);

console.log(props);

let roleOptions = ref([]);

const formParams = reactive(defaultValueRef());

const rules = {
  userCode: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入用户编号',
  },
  userName: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入用户名称',
  },
  password: {
    required: true,
    trigger: ['blur', 'change'],
    message: '请选择密码',
  },
};

function open(clickData = null) {
  _clickData = clickData;
  roleOptions.value = props.roleOptions;
  
  if (_clickData != null) {
    isUpdate.value = true;

    Object.assign(formParams, _clickData);
  } else {
    //默认密码
    formParams.password = '123456';
    isUpdate.value = false;
  }
  showModal.value = true;
}

const emit = defineEmits({
  reloadTable: null,
});

const reloadTable = () => {
  emit('reloadTable');
  Object.assign(formParams, defaultValueRef());
};
//取消
const cancel = () => {
  Object.assign(formParams, defaultValueRef());
  showModal.value = false;
};

function confirmForm(e) {
  e.preventDefault();
  formBtnLoading.value = true;
  formRef.value.validate((errors) => {
    if (!errors) {
      if (!isUpdate.value) {
        add(commonUtils.getformNoNullParams(formParams)).then((res) => {
          if (res.success) {
            message.success('新建成功');
            showModal.value = false;
            reloadTable();
          }
        });
      } else {
        update(commonUtils.getformNoNullParams(formParams)).then((res) => {
          if (res.success) {
            message.success('修改成功');
            showModal.value = false;
            reloadTable();
          }
        });
      }
    } else {
      message.error('请填写完整信息');
    }
    formBtnLoading.value = false;
  });
}

defineExpose({
  open,
});
</script>

<style>
</style>